<template>
	<view>
		<tui-drawer mode="bottom" :visible="visible" @close="closeDrawer">
			 <solt>
				 <view class="renew-container">
				    <view class="title">
				 	   <text class="titleTxt">一键续费</text>
				 	   <view class="close" @tap="closeDrawer">
				 		   <image class="closeImg" src="/static/user/my/icon_add3@2x.png"></image>
				 	   </view>
				    </view>
					<view class="renew-rule">
						<view class="rule">
							<text>续费规则</text>
							<image class="ruleImg" src="/static/user/my/icon_guize@2x.png"></image>
						</view>
						<view class="time_items">
							<view class="time_item" @tap="renewIndex=1" :style="renewIndex === 1 ? 'background:#2FD7D3':''">
								<text>1小时</text>
							</view>
							<view class="time_item"  @tap="renewIndex=2"  :style="renewIndex === 2 ? 'background:#2FD7D3':''">
								<text>2小时</text>
							</view>
							<view class="time_item"  @tap="renewIndex=3"  :style="renewIndex === 3 ? 'background:#2FD7D3':''">
								<text>3小时</text>
							</view>
							<view class="time_item" @tap="renewIndex=4"  :style="renewIndex === 4 ? 'background:#2FD7D3':''">
								<text>4小时</text>
							</view>
						</view>
					</view>
				    <tui-form-button @click="clickRenew" margin="0 0 30rpx 0" radius="70rpx" size="32" color="#fff" width="690rpx" height="84rpx" background="#2FD7D3">
				 		<tui-icon name="alarm" color="#fff" :size="'42rpx'" margin="0 8rpx 0 0"></tui-icon>
				 		谢谢大家的支持（￥98）
				    </tui-form-button>
				 </view>
			 </solt> 
		</tui-drawer>
	</view>
</template>

<script>
	export default {
		emits: ['alterVisible','clickRenew'],
		props: {
			//一键续约弹窗
			visible:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				 renewIndex:1
			}
		},
		methods: {
			clickRenew(){
				this.$emit("clickRenew",this.renewIndex)
			},
			closeDrawer(){
				this.$emit("alterVisible",false)
			}
			
		}
	}
</script>
  
<style lang="scss" scoped>
	.renew-container{
		padding: 0 30rpx 8rpx 30rpx;
		.renew-rule{
			padding: 40rpx 0;
			font-weight: 500;
			 
			.rule{
				font-size: 28rpx;
				color: #666666;
				line-height: 33rpx; 
				height: 36rpx;
				display: flex;
				align-items: center;
				padding-bottom: 30rpx;
			}
			.ruleImg{
				width: 28rpx;
				height: 28rpx;
				margin-left: 12rpx;
			}
			.time_items{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: calc(100w - 60rpx);
				.time_item{ 
					padding: 22rpx 38rpx;
					margin-right: 28rpx;
					background: #CCCCCC;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 33rpx;
					text-align: center;
				}
				.time_item:last-child{
					margin-right: 0
				}
			}
		}
		.title{
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			  display: flex;
			   align-items: center; /* 垂直居中 */
			   justify-content: center; /* 使所有内容居中 */
			   position: relative; /* 相对定位父容器，方便定位图标 */
			.titleTxt{
				font-weight: bold;
				font-size: 36rpx;
				color: #1A1A1A;
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				  flex: 1; /* 标题占据剩余空间 */
				  text-align: center; /* 标题居中 */
			}
			.close{
				   position: absolute; /* 绝对定位图标 */
				   right: 0; /* 图标右对齐 */
				  width: 48rpx;
				  height: 48rpx;
				  .closeImg{
					  width: 100%;
					  height: 100%;
				  }
			}
		}
	}
</style>